<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>折线图</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/highcharts/highcharts.js"></script>
		<script type="text/javascript" src="../js/highcharts/modules/exporting.js"></script>
	</head>
	<script type="text/javascript">
		var chart = null; // 定义全局变量
		$(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					type: 'spline',
					events: {
						load: requestData // 图表加载完毕后执行的回调函数
					}
				},
				title: {
					text: 'Live random data'
				},
				xAxis: {
					type: 'datetime',
					tickPixelInterval: 150,
					maxZoom: 20 * 1000
				},
				yAxis: {
					minPadding: 0.2,
					maxPadding: 0.2,
					title: {
						text: 'Value',
						margin: 80
					}
				},
				series: [{
					name: '随机数据',
					data: []
				}]
			});
		});

		/**
		 * Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新
		 * 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果
		 */
		function requestData() {
			$.ajax({
				url: '../waybill_findAll.action',
				success: function(point) {
//					alert(JSON.stringify(point));
					var series = chart.series[0],
						shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点

					// 新增点操作
					//具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
					chart.series[0].addPoint(point, true, shift);

					// 一秒后继续调用本函数
					setTimeout(requestData, 1000);
				},
				cache: false
			});
		}
	</script>
<body>
		<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</body>
</html>